<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- 本地css -->
    <link rel="stylesheet" href="./css/my.css" />
    <!-- font awesome图标 -->
    <link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
    <!-- animate动画 -->
    <link
      href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css"
      rel="stylesheet"
    />
    <title>首页-杨澎锴的作业实践11-YPKAI</title>
  </head>

  <body>
    <header>
      <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
        <div class="container">
          <a class="navbar-brand" href="#"
            ><img src="./image/logo.png" alt="logo" />
          </a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#"
                  >首页<span class="sr-only">(current)</span></a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">作业</a>
              </li>
              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  href="#"
                  id="navbarDropdown"
                  role="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  学习
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="#">Markdown学习</a>
                  <a class="dropdown-item" href="#">hugo学习</a>
                  <a class="dropdown-item" href="#">ypkai's blog</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">作业导航</a>
                </div>
              </li>
              <li class="nav-item">
                <a
                  class="nav-link disabled"
                  href="#"
                  tabindex="-1"
                  aria-disabled="true"
                  >关于网站</a
                >
              </li>
            </ul>
            <button class="btn btn-outline-success my-1 my-sm-0" type="submit">
              Search
            </button>
          </div>
        </div>
      </nav>
    </header>
    <main>
      <section>
        <div class="container">
          <div
            id="carouselExampleCaptions"
            class="carousel slide"
            data-ride="carousel"
          >
            <ol class="carousel-indicators">
              <li
                data-target="#carouselExampleCaptions"
                data-slide-to="0"
                class="active"
              ></li>
              <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
              <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <a href="news.html"><img
                  src="./image/1.jpg"
                  class="d-block w-100 img-fluid"
                  alt="1shu"
                />
                <div class="carousel-caption  d-md-block ">
                  <h3>《平凡的世界》</h3>
                  <p>
                    在这个世界上，不是所有合理的和美好的都能按照自己的愿望存在或实现。
                  </p>
                </div>
              </div></a>
              <div class="carousel-item">
                <img
                  src="./image/2.jpg"
                  class="d-block w-100 img-fluid"
                  alt="2shu"
                />
                <div class="carousel-caption d-md-block">
                  <h3>《平凡的世界》</h3>
                  <p>
                    通过一段血火般的洗礼，他相信，自己历尽千辛万苦而酿造的生活之蜜，肯定比轻而易举哪来的更有滋味！
                  </p>
                </div>
              </div>
              <div class="carousel-item">
                <img
                  src="./image/4.jpg"
                  class="d-block w-100 img-fluid"
                  alt="3shu"
                />
                <div class="carousel-caption  d-md-block">
                  <h3>《平凡的世界》</h3>
                  <p>
                    既不懈的追求生活，又不敢奢望生活过多的报酬和宠爱，而是理智而清醒的面对着现实。
                  </p>
                </div>
              </div>
            </div>
            <a
              class="carousel-control-prev"
              href="#carouselExampleCaptions"
              role="button"
              data-slide="prev"
            >
              <span
                class="carousel-control-prev-icon"
                aria-hidden="true"
              ></span>
              <span class="sr-only">Previous</span>
            </a>
            <a
              class="carousel-control-next"
              href="#carouselExampleCaptions"
              role="button"
              data-slide="next"
            >
              <span
                class="carousel-control-next-icon"
                aria-hidden="true"
              ></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </section>
      <section id="recently">
        <div class="container mt-5">
          <h3 class="text-center mb-3 animated bounceInUp delay-1s ">
            活动
          </h3>
          <div class="row mt-5 animated bounceInUp delay-2s">
            <div class="col-sm-3">
              <img src="./image/5.jpg" alt="活动照片" class="img-fluid" />
            </div>
            <div class="col-6">
              <h4>活动计划</h4>
              <!-- <ul class="list-unstyled">
                <li>
                  <i class="fa fa-calendar" aria-hidden="true"></i>
                  <div class="p-1 d-inline">
                    时间：2020年6月1日（10:00-12:00)
                  </div>
                </li>
                <li>
                  <i class="fa fa-map-marker" aria-hidden="true"></i>
                  <div class="p-2 d-inline">地点：大英图书馆</div>
                </li>
                <li>
                  <i class="fa fa-plane " aria-hidden="true"></i>
                  <div class="d-inline p-1">集合地点：伦敦机场</div>
                </li>
              </ul> -->
              <div class="row">
                <div class="col-1 d-inline">
                  <i class="fa fa-calendar" aria-hidden="true"></i>
                  <i class="fa fa-map-marker" aria-hidden="true"></i>
                  <i class="fa fa-plane " aria-hidden="true"></i>
                </div>
                <div class=" d-inline">
                  <ul class=" list-unstyled">
                    <li>时间：2020年6月1日（10:00-12:00)</li>
                    <li>地点：大英图书馆</li>
                    <li>集合地点：伦敦机场</li>
                  </ul>
                </div>
              </div>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
                eius facilis in! Doloremque necessitatibus a sit sint provident
                pariatur aliquam ratione harum nam sapiente ullam animi
                voluptatibus, optio quia corrupti?
              </p>
              <!-- <div style="display: inline;">
                <ul class=" list-unstyled">
                  <li><i class="fa fa-calendar" aria-hidden="true"></i></li>
                  <li><i class="fa fa-map-marker" aria-hidden="true"></i></li>
                  <li><i class="fa fa-plane " aria-hidden="true"></i></li>
                </ul>
              </div>
              <div style="display: inline-block;">
                时间：2020年6月1日（10:00-12:00) 地点：大英图书馆
                集合地点：伦敦机场
              </div> -->
            </div>
            <div class="col-sm-3 ">
              <button type="button" class="btn btn-primary mx-auto">
                报名参加
              </button>
            </div>
          </div>
        </div>
        <div class="container mt-5 animated bounceInUp delay-3s">
          <div class="row">
            <div class="col-sm-3">
              <img src="./image/5.jpg" alt="活动照片" class="img-fluid" />
            </div>
            <div class="col-6">
              <h4>活动计划</h4>
              <ul class="list-unstyled">
                <li>
                  <i class="fa fa-calendar" aria-hidden="true"></i
                  >时间：2020年7月1日（10:00-12:00)
                </li>
                <li>
                  <i class="fa fa-map-marker" aria-hidden="true"></i
                  >地点：UCLA图书馆
                </li>
                <li>
                  <i class="fa fa-plane" aria-hidden="true"></i
                  >集合地点：Losangles机场
                </li>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
                  eius facilis in! Doloremque necessitatibus a sit sint
                  provident pariatur aliquam ratione harum nam sapiente ullam
                  animi voluptatibus, optio quia corrupti?
                </p>
              </ul>
            </div>
            <div class="col-3">
              <button type="button" class="btn btn-primary mx-auto">
                报名参加
              </button>
            </div>
          </div>
        </div>
        <div class="container mt-5 animated bounceInUp delay-4s">
          <div class="row">
            <div class="col-3">
              <img src="./image/5.jpg" alt="活动照片" class="img-fluid" />
            </div>
            <div class="col-6">
              <h4>活动计划</h4>
              <ul class="list-unstyled">
                <li>
                  <i class="fa fa-calendar" aria-hidden="true"></i
                  >时间：2020年8月1日（10:00-12:00)
                </li>
                <li>
                  <i class="fa fa-map-marker" aria-hidden="true"></i
                  >地点：NEWYORK图书馆
                </li>
                <li>
                  <i class="fa fa-plane" aria-hidden="true"></i
                  >集合地点：曼哈顿机场
                </li>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
                  eius facilis in! Doloremque necessitatibus a sit sint
                  provident pariatur aliquam ratione harum nam sapiente ullam
                  animi voluptatibus, optio quia corrupti?
                </p>
              </ul>
            </div>
            <div class="col-3">
              <button type="button" class="btn btn-primary mx-auto">
                报名参加
              </button>
            </div>
          </div>
        </div>
      </section>
      <section id="vip" class=" position-relative">
        <p class="hpw position-absolute ">HAPPY-WELCOME</p>
        <div class=" container mt-5">
          <h4 class=" text-center mb-3">会员政策</h4>

          <div class="row">
            <div class="col-4">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi,
              facilis aliquid ipsa quia perferendis voluptatum, in omnis debitis
              illo accusantium alias consequuntur tenetur. Odio hic vel corrupti
              laborum sint velit.
            </div>
            <div class="col-4">
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti
              sunt blanditiis velit, modi perferendis alias sed distinctio,
              sequi consectetur aperiam quae minima totam quis, maxime facilis
              porro atque inventore nam.
            </div>
            <div class="col-4">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ut
              sapiente ad deleniti nostrum ipsa eius! Autem numquam aliquam
              nesciunt ducimus facere ad hic repellat corrupti a non, magni
              sapiente!
            </div>
          </div>
        </div>
      </section>
    </main>
    <footer class="mt-5 foot">
      <section>
        <div class="relation p-3 container-fluid bg-secondary">
          <div class="row">
            <div class=" sao text-center col-lg-4">
              <h3 class="mb-3">扫码关注</h3>
              <img src="./image/rr" alt="sao" />
            </div>

            <div class=" col-lg-4">
              <h3 class=" mb-3">联系方式</h3>
              <ul class="lianxi list-unstyled mt-1">
                <li>
                  <i class="fa fa-male " aria-hidden="true"></i> 杨先生
                </li>
                <li>
                  <i class="fa fa-mobile " aria-hidden="true"></i>
                  13893478664
                </li>
                <li>
                  <i class="fa fa-envelope-o " aria-hidden="true"></i>
                  ypkzxc@163.com
                </li>
                <li>
                  <i class="fa fa-map-marker " aria-hidden="true"></i>
                  甘肃省兰州市西北民族大学榆中校区
                </li>
              </ul>
            </div>
            <div class=" col-lg-4">
              <h3 class="mb-3">友情链接</h3>
              <ul class="list-unstyled">
                <li>
                  <i class="fa fa-graduation-cap " aria-hidden="true"></i
                  ><a href="http://www.xbmu.edu.cn/" target="_blank"
                    >西北民族大学</a
                  >
                </li>
                <li>
                  <i class="fa fa-git " aria-hidden="true"></i
                  ><a href="https://gitee.com/" target="_blank">码云平台</a>
                </li>
                <li>
                  <i class="fa fa-sign-in " aria-hidden="true"></i
                  ><a
                    href=" https://yangpengkai.gitee.io/hugopractice"
                    target="_blank"
                    >博客</a
                  >
                </li>
                <li>
                  <i class="fa fa-weibo " aria-hidden="true"></i
                  ><a href="https://weibo.com/" target="_blank"> 新浪微博</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      <section>
        <div class="copyright container-fluid bg-dark">
          <p class=" text-center text-white ">
            本网站是学习者的网站,使用<a
              href="https://www.bootcss.com/"
              target="_blank"
              >Bootstrap框架</a
            >搭建
          </p>
        </div>
      </section>
    </footer>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
  </body>
</html>
